<template>
  <div class="custom-data-manage">
      <div class="date-picker">
          <label>订单日期</label>
          <el-date-picker
            v-model="date"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
            </el-date-picker>
      </div>
      <div class="filter-wrapper">
          <BaseFilter :config="getFilterOptions()" @mychange="setFilterData" />
          <el-button>查询</el-button>
      </div>
      <div class="data-list">
        <el-card class="data-item" v-for="data in customerData" :key="data.key">
            <h5>{{data.label}}</h5>
            <span>{{data.value}}</span>
        </el-card>
      </div>
  </div>
</template>

<script>
import BaseFilter from "@/components/BaseFilter.vue";
import { cityOptionsData } from "../../config/city";
import { getCustomerData } from "@/api/data";
export default {
    name: "customerData",
    components: {
        BaseFilter,
    },
    data(){
        return {
            date: null,
            filterOptions: [
                {
                    label: "选择省份",
                    key: "province",
                    type: "select",
                    props: {
                        placeholder: "选择省份"
                    },
                    options: cityOptionsData
                },
                {
                    label: "选择市",
                    key: "city",
                    type: "select",
                    props: {
                        placeholder: "选择市"
                    },
                    options: []
                },
                {
                    label: "选择区",
                    key: "area",
                    type: "select",
                    props: {
                        placeholder: "选择区域"
                    },
                    options: []
                }
            ],
            filterData: null,
            customerDataMap: [{
                key: "res2",
                label: "成交用户数量"
            }, {
                key: "korder",
                label: "用户注册统计"
            }, {
                key: "res",
                label: "销售统计"
            }],
            customData: {}
        }
    },
    mounted(){
        this.getCustomerData()
    },
    methods: {
        setFilterData(value){
            this.filterData = value;
        },
        getFilterOptions(){
            const { province, city } = this.filterData || {};
            let cityList = [];
            return this.filterOptions.map(item => {
                switch(item.key){
                    case "city":
                        cityList = (province ? cityOptionsData.find(item => item.value === province)?.children : []) || []
                        return {
                            ...item,
                            options: cityList,
                            props: {
                                ...item.props,
                                disabled: cityList.length === 0
                            }
                        }
                    case "area":
                        const areaList = ((city && cityList) ? cityList.find(item => item.value === city)?.children : []) || [];
                        return {
                            ...item,
                            options: areaList,
                            props: {
                                ...item.props,
                                disabled:  areaList.length === 0
                            }
                        }
                    default:
                        return item;
                }
            })
        },
        getCustomerData(){
            getCustomerData().then(res => {
                if(res.code === 200){
                    this.customData = res.data;
                    console.log(res.data)
                }
            }).catch(err => {
                this.$message.error("加载数据失败")
            });
        }
    },
    computed: {
        customerData(){
            return this.customerDataMap.map(item => {
                return {
                    ...item,
                    value: this.customData[item.key] || 0
                }
            })
        }
    }
}
</script>

<style lang="scss">
.custom-data-manage {
    width: 100%;
    height: 100%;
    background-color: #FFF;
    padding: 16px 24px;
    box-sizing: border-box;
    .date-picker {
        label {
            display: inline-block;
            width: 100px;
            &::after {
                content: ":";
                margin-left: 3px;
            }
        }
    }
    .filter-wrapper {
        margin-top: 20px;
        display: flex;
    }
    .data-list {
        margin-top: 20px;
        display: flex;
        justify-content: space-around;
        .data-item {
            flex: 1;
            margin-right: 20px;
            &:last-child {
                margin-right: 0;
            }
        }
    }
}
</style>